<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Insert title here</title>
	<script
		src="https://maps.googleapis.com/maps/api/js?sensor=true&amp;libraries=places">
	</script>
	<style>
	.map {
		height: 400px;
		width: 970px;
		margin-top: 0.5em;
		margin-left: 5px;
	}
	
	</style>
	
</h:head>
<h:body>
	
	<h:form id="consulta">
	<div
		style="padding-top: 10px; margin-left: 5px; margin-bottom: 10px; margin-right: 5px;">

		<fieldset style="border: 1px dotted #ccc; background: #e8e8e8">
			<table>
				<tr>
					<td><label for="endereco"><strong>Endereço de
								destino</strong> </label></td>
					<td><h:inputText value="#{mapBean.endereco}" /></td>

				</tr>
				<tr>
					<td><label for="raio"><strong>Distância</strong> </label> <label
						style="margin-left: 5px;">(metros)</label>
					</td>
					<td><h:commandButton action="#{mapBean.pesquisar}" value="Pesquisar" styleClass="cssbutton"/>
					
					</td>

				</tr>

			</table>

			<label style="color: blue"> *Se não for informado uma
				distância, será considerada a padrão de 200m.</label>


		</fieldset>

	</div>
	</h:form>

	<h:form id="mapa">  
    
    <p:gmap center="-23.56916,-46.713356" zoom="13" type="ROADMAP" model="#{mapBean.advancedModel}" styleClass="map">  
        <p:ajax event="overlaySelect" listener="#{mapBean.onMarkerSelect}" />  
  
        <p:gmapInfoWindow>  
            <p:outputPanel style="text-align:center;display:block;margin:auto:">  
  
                    <p:graphicImage value="/images/antalya/#{mapBean.marker.data}" height="150"/>  
                    <br />  
                    <h:outputText value="#{mapBean.marker.title}" />  
  
            </p:outputPanel>  
  
        </p:gmapInfoWindow>   
    </p:gmap>  
  
	</h:form>  	

</h:body>
</html>